<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui-iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.3.1.min.css"/>

</head>

<body>
<style>
    .reg-body {
        background: #f0f0f0;
        width: 100%;
        height: 100%;
        position: fixed;
    }

    [v-cloak] {
        display: none;
    }

    .perfect {
        background: #fff;
    }

    .perfect_head {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        padding-top: 30px;
        padding-bottom: 30px;

    }

    .perfect_head span {
        width: 20px;
        height: 20px;
        display: block;
        background: #cccccc;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
    }

    .perfect_head_status1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 10px;
    }

    .perfect_head_status1 span {
        margin-right: 10px;
    }

    .perfect_head_status1.active {
        color: #478bf8;
    }

    .perfect_head_status1.active span {
        background: #478bf8;
        color: #fff;
    }

    .touxiang1 {
        width: 160px;
        height: 160px;
        margin: auto;
        margin-bottom: 20px;
    }

    .touxiang1 img {
        width: 160px;
        height: 160px;
    }

    .regperfect {
        background: #fff;
        padding-bottom: 20px;
    }

    .reg-button {
        width: 80%;
        height: 45px;
        background: rgba(109, 67, 229, 1);
        border-radius: 5px;
        margin: 40px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
    }

    .reglist {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    .reglist1 {
        height: 45px;
        border-bottom: 1px solid #f6f6f6;
        width: 92%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .reglabel {

    }

    .regright {
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    .regright span {
        width: 35px;
        height: 25px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 2px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        color: #333333;
    }

    .regright span.active {
        background: rgba(109, 67, 229, 1);
        color: #fff;

    }

    .regright1 {
        color: #C7C7C8;
    }

    .touxiang1 {
        padding-top: 20px;
    }

    .touxiang1 .icon-plus {
        font-size: 50px;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #eeeeee;

    }

    .shangchuan {
        width: 160px;
        height: 160px;
        border: 1px solid #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .reglist1 input {
        height: 45px;
        border: none;
        line-height: 45px;
    }

    .zwjs {
        display: flex;
        width: 100%;
        background: #fff;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    .zwjs_title {
        width: 92%;
        height: 45px;
        border-bottom: 1px solid #f8f8f8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        font-size: 16px;
    }

    .zwjs_desc {
        width: 92%;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .zwjs_desc input {
        border: none;
        padding: 0;
        font-size: 14px;
    }

    .zwjs_desc2 {
        display: flex;
        width: 92%;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;


    }

    .zwjs_desc2 span {
        background: rgba(248, 248, 248, 1);
        padding: 5px 20px;
        font-size: 14px;
        color: #999999;
        margin-right: 10px;
        border-radius: 3px;
    }

    .zwjs_desc3 {
        display: flex;
        width: 100%;
        margin-left: 10px;
        justify-content: center;
        align-items: center;
        height: 50px;
    }

    .zwjs_desc3 span {
        font-size: 14px;
        color: #999999;
        width: 20%;
    }

    .zwjs_desc3 span.active {
        color: #6D43E5;
    }

    #box {
        background: #ffffff;
        height: 106px;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: -106px;
        -webkit-transform: translate3d(0px, -106px, 0px);
        -moz-transform: translate3d(0px, -106px, 0px);
        transform: translate3d(0px, -106px, 0px);
        transition: all 0.3s;
        visibility: hidden;
    }

    #box a {
        display: block;
        width: 100%;
        text-align: center;
        height: 40px;
        background: #fff;
        color: #333;
        line-height: 40px;
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        position: relative;
        margin-bottom: 6px;
    }

    .btn {
        margin-top: 0.1rem;
        margin-bottom: 2rem;
        text-align: center
    }

    .btn button {
        width: 90%;
        outline: none;
        border: none;
        background: #009bdb;
        color: #fff;
        height: 40px;
        display: inline-block;
        border-radius: 0.4rem;
        font-size: 16px;
    }
</style>
<div id="app">
    <div id="wraps" class="flex-wrap bgn flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>评价</span>
                </li>
            </ul>
        </header>
        <div class="reg-body">
            <!--基本资料-->
            <div class="regperfect fixed-header">
                <div class="ziliao">
                    <div class="touxiang1">
                        <img :src="avatar" alt="">
                    </div>
                    <div class="reglist">
                        <!--<div class="reglist1">-->
                            <!--<div class="reglabel">-->
                                <!--性别-->
                            <!--</div>-->
                            <!--<div class="regright1">-->
                                <!--{{gender|getsex}}-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="reglist1">-->
                            <!--<div class="reglabel">-->
                                <!--生日-->
                            <!--</div>-->
                            <!--<div class="regright1">-->
                                <!--{{birthday}}-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="reglist1">-->
                        <!--<div class="reglabel">-->
                        <!--籍贯-->
                        <!--</div>-->
                        <!--<div class="regright1">-->
                        <!--{{province}}{{city}}{{country}}-->
                        <!--</div>-->
                        <!--</div>-->
                        <p style="font-size: 16px;color: #000;margin-top: 10px;">{{nickname}}</p>
                        <div class="zwjs mt10">
                            <div class="zwjs_title aui-text-center">
                                <p style="width: 100%;font-size: 18px;color: #FF9999" class="aui-text-center">对他（她）印象</p>
                            </div>
                            <div class="zwjs_desc3">
                            <span v-for="(item,index) in pingfenlist" :class="score==item?'active':''"
                                  @click="checkscore(item.pingfen)">
                                    <i class="icon iconfont" :class="score==item?'icon-radio':'icon-radio-o'"></i>{{item.name}}
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reg-button" @click="pingjia">
                    提交评分
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/mui.min.js"></script>
<script src="../../script/mui.picker.js"></script>
<script src="../../script/mui.poppicker.js"></script>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
        function lt(id, xm, tx) {
            api
            api.openWin({
                reload: true,
                name: 'kaolv',
                url: 'widget://html/win_chat.html',
                pageParam: {
                    id: id,
                    zh: xm,
                    tx: tx
                },
                vScrollBarEnabled: false,
            });
            if ($api.getStorage('id') == id) {
            } else {
                var rong = api.require('rongCloud2');
                rong.clearMessagesUnreadStatus({
                    conversationType: 'PRIVATE',
                    targetId: id
                }, function (ret, err) {
                })
            }
            api.sendEvent({
                name: 'hhxx'
            });
        }

        var main = new Vue({
            el: "#app",
            data: {
                birthday: api.pageParam.birthday,
                province: '',
                city: '',
                country: '',
                img: '',
                uid: api.pageParam.uid,
                id: api.pageParam.id,
                orderno: api.pageParam.orderno,
                gender: api.pageParam.gender,
                avatar: ajaxUrl + api.pageParam.avatar,
                nickname: api.pageParam.nickname,
                pingfenlist: [
                    {
                        name: '一般',
                        pingfen: 0
                    }, {
                        name: '及格',
                        pingfen: 60
                    }, {
                        name: '良好',
                        pingfen: 80
                    }, {
                        name: '优秀',
                        pingfen: 100
                    }
                ],
                score: -1,
                grade: 0
            },
            mounted: function () {
                var that = this;
                // this.getmessage()
                console.log("===========");
                console.log(that.id);
            },

            methods: {
                checkscore: function (e) {
                    this.score = e
                    this.grade = e
                },
                pingjia: function (e) {
                    var that = this;
                    if (this.grade == 0) {
                        api.toast({msg: '打个分吧', location: 'middle'});
                        return
                    }
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(that.orderno);
                    console.log(that.grade);
                    api.ajax({
                        url: ajaxRoute.judge,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                orderno: that.orderno,
                                grade: that.grade
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            api.sendEvent({
                                name: 'pingjiaok',
                            });
                            back()
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                yaoqing: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.accept,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                orderno: that.orderno
                            }
                        }
                    }, function (res, err) {
                        console.log("接受邀请返回信息");
                        console.log(that.uid);
                        console.log(that.nickname);
                        console.log(that.avatar);
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            lt(that.uid, that.nickname, that.avatar)
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                getmessage: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.pushinfo,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                id: that.uid
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            console.log(JSON.stringify(res));
                            that.gender = res.data.gender
                            that.birthday = res.data.birthday
                            that.province = res.data.province
                            that.city = res.data.city
                            that.country = res.data.country
                            that.avatar = ajaxUrl + res.data.avatar
                            that.nickname = res.data.nickname
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {
                getsex: function (e) {
                    if (e) {
                        return '男'
                    } else {
                        return '女'
                    }
                },
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    console.log(imgs)
                    return imgs;
                }
            }
        })
    }
</script>

</html>
